.main-container {
    background: #ECECEC;
    padding: 10px;
    height: 100%;
    .summary-tab {
        height: 100%;
        background: #fff;
        ::ng-deep .ant-tabs-bar {
            margin: 0;
        }
        ::ng-deep .ant-tabs-content {
            height: calc(100% - 45px);
        }

        .main-content {
            padding: 10px;
            height: 100%;
            display: flex;
            flex-direction: column;
            .box {
                height: 100%;
                flex: 1;
                &:first-child {
                    .card {
                        margin-left: 0;
                    }
                }
                &:last-child {
                    .card {
                        margin-right: 0;
                    }
                }
                .card {
                    margin: 5px;
                    height: 100%;
                    .info-content {
                        box-shadow: none;
                        text-align: center;
                        p {
                            margin: 0;
                        }
                    }
                }
            }

            .pie-content {
                width: 100%;
                box-shadow: none;
                .chart {
                    margin: 0 auto;
                    width: 200px;
                    height: 200px;
                    ::ng-deep .ant-progress-circle .ant-progress-text {
                        font-size: 18px;
                        font-weight: bold;
                    }
                }
            }
            .detail-content {
                width: 100%;
                box-shadow: none;
                ::ng-deep .ant-table-small .ant-table-body {
                    margin: 0;
                }
            }
            .card-container {
                flex: 1;
            }
        }

        .month-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            .box.column-box {
                width: 100%;
                height: 50%;
                .card {
                    margin: 0;
                    height: 100%;
                    ::ng-deep .ant-card-body {
                        height: calc(100% - 57px);
                        .ant-card-grid {
                            height: 100%;
                            box-shadow: none;
                        }
                    }
                }
                .pie-content {
                   padding-top: 20px;
                }
                .month-table-content {
                    padding: 10px;
                    ::ng-deep .ant-table-small .ant-table-body {
                        margin: 0;
                    }
                }
            }

        }
    }


    .month-plan-content {
        .content-top-bar{
            display: flex;
            justify-content: space-between;
            .selection-box {
                display: flex;
                flex: 1;
            }
        }
    }
}


.green {
    color: #0aa920;
}

.red {
    color: #ee080c;
}
.full-page{
    width:100%;
    height:100%;
}


